<template>
	<div style="margin: 20px;">
	    <mu-text-field label="新密码" :maxLength="18" v-model="pd1" labelFloat type="password"
	    	:errorText="pd1Error" @textOverflow="pd1ErrorEvent"/>
	    <mu-text-field label="确认新密码" :maxLength="18" v-model="pd2" labelFloat type="password"
	    	:errorText="pd2Error" @textOverflow="pd2ErrorEvent"/>
		<div class="mt_20">
			<mu-raised-button @click="save" label="保存提交" class="demo-raised-button"
				fullWidth primary style="height: 42px;"/>
		</div>

		<!-- alertDialog -->
		<alerts-dialog :alertData="alertDialog"></alerts-dialog>
	</div>
</template>

<script>
import axios from 'axios'
import md5 from 'md5'
export default{
	data(){
		return {
			pd1: '',
			pd2: '',
			pd1Error: '',
			pd2Error: '',
			alertDialog: {}
		}
	},
	methods: {
		save(){
			let params = {
					mobile: this.$store.state.userInfo.mobile,
					password: md5(this.pd1).toUpperCase()
				};

			if(this.pd1.length < 6){
				this.alertDialog = {
					openState: true,
					content: '密码长度不得少于6位，请修改！'
				}
				return false;
			}
			if(this.pd1 != this.pd2){
				this.alertDialog = {
					openState: true,
					content: '两次输入密码不一致！'
				}
				return false;
			}

			axios.post($base + 'users/changePassword', params).then(json => {
				this.alertDialog = {
					openState: true,
					content: '密码修改成功，2秒后返回用户中心！'
				}
				let me = this;
				setTimeout(function(){
					me.$router.push('/member')
				}, 2000)
			}).catch(json => {
				console.log(json)
			})
		},
		pd1ErrorEvent(str){
			this.pd1Error = str ? '密码长度超过限制，请修改！' : '';
		},
		pd2ErrorEvent(str){
			this.pd2Error = str ? '密码长度超过限制，请修改！' : '';
		},
	},
	mounted(){
		
	}
}
</script>